<template>
  <s-layout title="工作台">
    <view class="box">
      <view
        class="w"
        style="height: 240rpx; display: flex; align-items: center"
      >
        <view>
          <img
            style="width: 150rpx; height: 150rpx"
            src="https://picture-1326598115.cos.ap-nanjing.myqcloud.com/2025/06/175681ac93a19d4eff872362ee3b6c8969头像.png"
            alt=""
        /></view>
        <view style="margin-left: 20rpx">
          <view
            style="
              color: #ff6000;
              font-weight: 900;
              font-size: 40rpx;
              margin-bottom: 20rpx;
            "
            >{{ userInfo.nickname }}</view
          >
          <view>{{ userInfo.phone }}</view>
        </view>
      </view>
      <view class="recording w">
        <view class="goodsnum">
          <view
            style="font-weight: 700; font-size: 30rpx; margin-bottom: 10rpx"
            >{{ data.todayOrderCount }}</view
          >
          <view>今日订单数</view>
        </view>
        <view class="goodsnum">
          <view style="font-weight: 700; font-size: 30rpx; margin-bottom: 10rpx"
            >{{ data.todayTransactionAmount }}元</view
          >
          <view>今日成交额</view>
        </view>
        <view class="goodsnum">
          <view
            style="font-weight: 700; font-size: 30rpx; margin-bottom: 10rpx"
            >{{ data.waitDeliveredCount }}</view
          >
          <view>未发订单数</view>
        </view>
      </view>
      <view class="boxapp w">
        <view style="margin-bottom: 20rpx; font-weight: 700">常用应用</view>
        <view
          style="
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20rpx;
          "
        >
          <view class="app" @click="getuser">
            <image
              src="https://picture-1326598115.cos.ap-nanjing.myqcloud.com/2025/06/16ab15e613ecfa42ef800996b07fb8028c用户管理.png"
              style="width: 100rpx; height: 100rpx"
            ></image>
            <span style="margin-top: 10rpx">用户管理</span>
          </view>
          <view class="app" @click="getorder">
            <image
              src="https://picture-1326598115.cos.ap-nanjing.myqcloud.com/2025/06/17093712829cbf4c7ea14adbea0aaa279c交易中心-订单管理.png"
              style="width: 100rpx; height: 100rpx"
            ></image>
            <span style="margin-top: 10rpx">订单管理</span>
          </view>
          <view class="app" @click="getshoop">
            <image
              src="https://picture-1326598115.cos.ap-nanjing.myqcloud.com/2025/06/175b68cb65e9b24962bce9d5b9358d1fe5商品管理.png"
              style="width: 100rpx; height: 100rpx"
            ></image>
            <span style="margin-top: 10rpx">商品管理</span>
          </view>
          <view class="app" @click="getphone">
            <image
              src="https://picture-1326598115.cos.ap-nanjing.myqcloud.com/2025/06/175b68cb65e9b24962bce9d5b9358d1fe5商品管理.png"
              style="width: 100rpx; height: 100rpx"
            ></image>
            <span style="margin-top: 10rpx">手机号扣款</span>
          </view>
          <view class="app" @click="getperson">
            <image
              src="https://picture-1326598115.cos.ap-nanjing.myqcloud.com/2025/06/175b68cb65e9b24962bce9d5b9358d1fe5商品管理.png"
              style="width: 100rpx; height: 100rpx"
            ></image>
            <span style="margin-top: 10rpx">当面付订单</span>
          </view>
        </view>
      </view>
      <Boom :type="1"></Boom>
    </view>
  </s-layout>
</template>

<script setup>
import { reactive, computed, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import sheep from "@/sheep";
import Boom from "./components/boom.vue";

const userInfo = computed(() => sheep.$store("user").userInfo);
console.log(userInfo.value);

const data = ref({});

const aftersaleStatistics = async () => {
  const res = await sheep.$api.order.aftersaleStatistics();
  data.value = res;
  console.log(data.value, "res");
};
aftersaleStatistics();

const getuser = () => {
  uni.navigateTo({
    url: "/pages/shoopbackground/usermanagement",
  });
};
const getshoop = () => {
  uni.redirectTo({
    url: "/pages/shoopbackground/shoop",
  });
};
const getorder = () => {
  uni.redirectTo({
    url: "/pages/shoopbackground/orders",
  });
};
const getperson = () => {
  uni.redirectTo({
    url: "/pages/shoopbackground/payinperson",
  });
};

const getphone = () => {
  uni.redirectTo({
    url: "/pages/shoopbackground/phonelist",
  });
};
</script>

<style lang="scss" scoped>
.box {
  height: 90vh;
  width: 100%;
  background-color: #f7f7f7;
  // background: linear-gradient(to bottom, #ff6000, #e4f4fe);
  box-sizing: border-box;
  padding-top: 40rpx;
}
.w {
  width: 94%;
  margin: auto;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 10rpx;
}
.recording {
  height: 200rpx;
  background-color: #fff;
  margin-bottom: 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.boxapp {
  background-color: #fff;
}
.app {
  width: 160rpx;
  display: flex;
  flex-flow: column;
  align-items: center;
  font-size: 26rpx;
}
.goodsnum {
  display: flex;
  flex-flow: column;
  align-items: center;
}
</style>
